<template>
  <div class="guide-popup">
    <div class="content">
      <div class="content-left">
        <div class="content-card">
          <p class="content-desc">扫码进入小程序</p>
          <div class="content-card-img">
            <img class="ic-mini-code" src="@/assets/common/ic-mini-code.jpg" />
          </div>
        </div>
        <div class="content-card">
          <p class="content-desc">使用中有疑问可联系</p>
          <div class="content-card-img">
            <img class="ic-wx-code" src="@/assets/common/ic-wx-code.jpg" />
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="content-card">
          <img class="ic-guide" :src="type == 2 ? Guide2 : Guide1" />
        </div>
      </div>
    </div>
    <div class="dialog-footer">
      <el-button plain @click="handleCancel"> 取 消 </el-button>
    </div>
  </div>
</template>

<script setup>
import Guide1 from '@/assets/common/ic-guide1.png';
import Guide2 from '@/assets/common/ic-guide2.png';

// modal,pinia
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

const emit = defineEmits(['on-close']);

const props = defineProps({
  type: {
    type: [Number, String],
    default: 1,
  },
});

const handleCancel = () => {
  modalStore.closeModal();
  emit('on-close');
};
</script>

<style lang="scss" scoped>
.guide-popup {
}

.content {
  width: 100%;
  height: auto;
  display: flex;

  .content-left {
    flex: 1;
    flex-shrink: 0;
    // height: 100%;
    display: flex;
    flex-direction: column;
    margin-right: 12px;

    & > div:nth-child(1) {
      margin-bottom: 12px;
      // height: 100%;
      // flex: 1;
    }
  }

  .content-right {
    width: 100%;
    height: auto;
    flex: 1;
    flex-shrink: 0;
  }

  .content-card {
    height: 100%;
    border: 1px solid #eee;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .content-card-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ic-mini-code {
    width: 100%;
    height: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    object-fit: contain;
  }

  .ic-wx-code {
    width: 100%;
    height: 100%;
    padding: 0 26px;
    box-sizing: border-box;
    object-fit: contain;
  }

  .ic-guide {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .content-desc {
    color: #999;
    font-size: 12px;
    text-align: center;
  }
}
</style>
